<template>
  <div class="flex-center-middle h100">
    <div class="flex1 text-center h100">
      <div class="img">
        <img
          v-lazy="co1"
          alt="" />
      </div>
      <div class="small">CO2减排</div>
      <div class="num mt8">123.45<span class="small"> t</span></div>
    </div>
    <div class="flex1 text-center h100">
      <div class="img">
        <img
          v-lazy="co2"
          alt="" />
      </div>
      <div class="small">节约标准煤</div>
      <div class="num mt8">123.45<span class="small"> t</span></div>
    </div>
    <div class="flex1 text-center h100">
      <div class="img">
        <img
          v-lazy="co3"
          alt="" />
      </div>
      <div class="small">减少森林砍伐</div>
      <div class="num mt8">123<span class="small"> 棵</span></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import co1 from '@imgs/Frame10107@2x.png'
import co2 from '@imgs/Frame10107@2x(1).png'
import co3 from '@imgs/Frame10107@2x(2).png'
</script>

<style lang="scss" scoped>
.img {
  height: calc(100% - 12rem);
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
  box-sizing: border-box;
  img {
    display: block;
    height: 80%;
    margin: 10% auto;
  }
}

.flex1 {
  flex: 1;
}
.small {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
}
.num {
  color: #fff;
  font-size: 2.8rem;
}
</style>
